<!-- 模块说明 -->

<script setup lang='ts'>
// @ts-ignore
// import {ref} from 'vue'
import { reactive, ref } from 'vue'
// @ts-ignore
import { Login } from '../../api'
// @ts-ignore
import type { FormInstance, FormRules } from 'element-plus'
// @ts-ignore
import { useCustomersStore } from "../../store"
// @ts-ignore
import { useRoute, useRouter } from 'vue-router'
const customerstore = useCustomersStore()
const ruleFormRef = ref<FormInstance>()
const route = useRoute()
const router = useRouter()
const username = (_: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('账号不能为空'))
  }
  callback()
}
const password = (_: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  }
  callback()
}
const ruleForm = reactive({
  username: '',
  password: ''
})
const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ validator: username, trigger: 'blur' }],
  password: [{ validator: password, trigger: 'blur' }]
})

//验证
const submitForm = async (username: any, password: any) => {

  let res = await Login["login"](username.value, password.value);

  console.log(res, "登录后端返回的值");
  //res.loginUserVo.username  token
  // @ts-ignore
  if (res.code == "1") {
    // sessionStorage.setItem("username", res.msg)
    // sessionStorage.setItem('token', res.loginUserVo.token)
    // @ts-ignore
    let { username, token, id } = res.loginUserVo;
    customerstore.SET_USER(username, token, id);
    console.log(username, token, id, "三个不同的参数")
    console.log(route, "route.query.redirect")
    let path: any = route.query.redirect || "/"//如果是购物车来的，因为前者被购物车传了参，所以就去前者，如果是其他，没有被传参，就去主页
    router.push(path)
    // history.go(-1);
  }
}


</script>

<template>
  <div class="top">
    <el-form ref="ruleFormRef" style="max-width: 300px" :model="ruleForm" status-icon :rules="rules" label-width="auto"
      class="demo-ruleForm">
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ref(ruleForm.username), ref(ruleForm.password))">登录</el-button>
        <router-link to="/register"><a>没有账号？去注册</a></router-link>
      </el-form-item>
    </el-form>

  </div>
</template>
<style>
.el-form-item__label {
  color: #fff !important; /* 设置字体颜色为红色，并强制生效 */
}
</style>
<style lang="scss" scoped>
.top {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;

  background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202010%2F22%2F20201022131928_1b668.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712283623&t=b6ae87cb6de9b72a4ab4ccfc08aaab56);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
}



a {
  margin-left: 25px;
  color: #fff;
}

</style>
